<template>
  <div class="mode" :style="{ left: left + 'px' }">
    <button>设计</button>
    <button>拆分</button>
    <button>源码</button>
  </div>
</template>

<script>
  export default {
    name: 'mode',
    data() {
      return {
        
      }
    },
    props: {
      left: {
        type: Number,
        default: 10
      }
    }
  }
</script>

<style lang="less" scoped>
  .mode {
    width: 200px;
    height: 20px;
    background: white;
    position: fixed;
    bottom: 10px;
    box-shadow: 10px rgba(0,0,0,.15);
    display: flex;
    justify-content: space-around;
    align-content: center;
    button {
      width: 33.3%;
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      &:hover {
        cursor: pointer;
      }
    }
  }
</style>